<template>
	<view>
		<view class="nav"></view>
		<!-- 顶部橙色区域 -->
		<view class="head">
			
			<!-- 头像和id -->
			<!-- :class="{'bottom':binfo.gradeName==''&&binfo.groupGradeName==''}" -->
			<view class="info" v-if="islogin" @click="navTo('/pages/user/set/setuserinfo','1')" >
				<image class="touxiang" :src="userInfo.avatarUrl || '../../static/user/touxiang.png'" ></image>
				<text class="name">{{userInfo.phone || "完善资料"}}</text>
			</view>
			<view class="info" v-else >
				<image class="touxiang" src="../../static/user/touxiang.png" mode="widthFix"></image>
				<text class="name" @click="tologin('/pages/login/login')">立即登录</text>
			</view>
			<view class="level">
				<view class="level_bg" v-if="binfo.gradeName!=''">
					<image class="vimg" src="../../static/vip/v1.png" mode="widthFix" v-if="binfo.gradeName=='VIP1'"></image>
					<image class="vimg" src="../../static/vip/v2.png" mode="widthFix" v-if="binfo.gradeName=='VIP2'"></image>
					<image class="vimg" src="../../static/vip/v3.png" mode="widthFix" v-if="binfo.gradeName=='VIP3'"></image>
					<image class="vimg" src="../../static/vip/v4.png" mode="widthFix" v-if="binfo.gradeName=='VIP4'"></image>
					<text>会员等级</text>
				</view>
				<view class="level_bg" v-if="binfo.groupGradeName!=''">
					<image class="vimg" src="../../static/vip/s1.png" mode="widthFix" v-if="binfo.groupGradeName=='S1'"></image>
					<image class="vimg" src="../../static/vip/s2.png" mode="widthFix" v-if="binfo.groupGradeName=='S2'"></image>
					<image class="vimg" src="../../static/vip/s3.png" mode="widthFix" v-if="binfo.groupGradeName=='S3'"></image>
					<image class="vimg" src="../../static/vip/s4.png" mode="widthFix" v-if="binfo.groupGradeName=='S4'"></image>
					<image class="vimg" src="../../static/vip/s5.png" mode="widthFix" v-if="binfo.groupGradeName=='S5'"></image>
					<image class="vimg" src="../../static/vip/s6.png" mode="widthFix" v-if="binfo.groupGradeName=='S6'"></image>
					<image class="vimg" src="../../static/vip/s7.png" mode="widthFix" v-if="binfo.groupGradeName=='S7'"></image>
					<image class="vimg" src="../../static/vip/s8.png" mode="widthFix" v-if="binfo.groupGradeName=='S8'"></image>
					<text>团队等级</text>
				</view>
				<view class="level_bg" v-else>
					<image class="vimg" src="../../static/vip/s0.png" mode="widthFix" ></image>
					<text>团队等级</text>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="scan" @click="scan">
				<u-icon name="scan" color="#fff" size="50"></u-icon>
			</view>
			<!-- #endif -->
		</view>
		<!-- 蓝色区域 -->
		<view class="blue">
			<view class="yun" @click="navTo('/pages/user/yun/yuntuan','1')">
				<view>
					<image class="yunimg" src="../../static/user/yuntuan.png" ></image>
				</view>
				<view>积分</view>
				<view>{{binfo.cloudGroupNum}}</view>
			</view>
			<view class="yun" @click="navTo('/pages/user/yun/yuntuan?type=1','1')" v-if="binfo.isOld==true">
				<view>
					<image class="yunimg" src="../../static/user/sj.png" ></image>
				</view>
				<view>释放积分</view>
				<view>{{binfo.oldPoints}}</view>
			</view>
			<view class="yun" @click="navTo('/pages/user/yun/yunbi','1')">
				<view>
					<image class="yunimg" src="../../static/user/yunbi.png" ></image>
				</view>
				<view>余额</view>
				<view>{{binfo.cloudCoinNum}}</view>
			</view>
			<view class="yun" @click="navTo('/pages/user/yun/yunbi?type=1','1')" v-if="binfo.isOld==true">
				<view>
					<image class="yunimg" src="../../static/user/sy.png" ></image>
				</view>
				<view>释放余额</view>
				<view>{{binfo.oldBalance}}</view>
			</view>
			<view class="yun" @click="navTo('/pages/user/yun/tuijian?ma='+binfo.recommendCode,'1')">
				<view>
					<image class="yunimg" src="../../static/user/tuijian.png" ></image>
				</view>
				<view>推荐码</view>
				<view>{{binfo.recommendCode}}</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="order">
			<view class="all_order">
				<view>全部订单</view>
				<view @click="navTo('/pages/product/allorder/allorder?type=0','1')">查看全部订单</view>
			</view>
			<view class="order_detail">
				<view class="order_item" @click="navTo('/pages/product/allorder/allorder?type=1','1')">
					<text class="iten_num" v-if="binfo.waitPayNum>0">{{binfo.waitPayNum}}</text>
					<view>
						<image class="orderimg" src="../../static/user/daifukuan.png" mode="widthFix"></image>
					</view>
					<view class="order_item_text">待付款</view>
				</view>
				<view class="order_item" @click="navTo('/pages/product/allorder/allorder?type=2','1')">
					<text class="iten_num" v-if="binfo.waitDeliverGoodsNum>0">{{binfo.waitDeliverGoodsNum}}</text>
					<view>
						<image class="orderimg" src="../../static/user/daifahuo.png" mode="widthFix"></image>
					</view>
					<view class="order_item_text">待发货</view>
				</view>
				<view class="order_item" @click="navTo('/pages/product/allorder/allorder?type=3','1')">
					<text class="iten_num" v-if="binfo.waitReceivGoodsNum>0">{{binfo.waitReceivGoodsNum}}</text>
					<view>
						<image class="orderimg" src="../../static/user/daishouhuo.png" mode="widthFix"></image>
					</view>
					<view class="order_item_text">待收货</view>
				</view>
				<view class="order_item" @click="navTo('/pages/product/allorder/allorder?type=4','1')">
					<text class="iten_num" v-if="binfo.evaluationsNum>0">{{binfo.evaluationsNum}}</text>
					<view>
						<image class="orderimg" src="../../static/user/pingjia.png" mode="widthFix"></image>
					</view>
					<view class="order_item_text">待评价</view>
				</view>
				<!-- <view class="order_item">
					<text class="iten_num">1</text>
					<view>
						<image class="orderimg" src="../../static/user/shouhou.png" mode="widthFix"></image>
					</view>
					<view class="order_item_text">退换/售后</view>
				</view> -->
			</view>
		</view>
		<!-- 更多功能 -->
		<view class="more">
			<view class="userful">更多功能</view>
			<view class="userful_box">
				<view class="userful_item" @click="navTo('/pages/transfer/tixian','1')">
					<view>
						<image class="userfulimg" src="../../static/user/duihuan.png" ></image>
					</view>
					<view>提现</view>
				</view>
				<view class="userful_item" @click="navTo('/pages/user/chongzhi','1')">
					<view>
						<image class="userfulimg" src="../../static/user/chongzhi.png" ></image>
					</view>
					<view>代购</view>
				</view>
				<!-- <view class="userful_item" @click="navTo('/pages/live/live','1')">
					<view>
						<image class="userfulimg" src="../../static/user/chongzhi.png" ></image>
					</view>
					<view>直播</view>
				</view> -->
				<!-- <view class="userful_item" @click="navTo('/pages/product/allorder/groupOrder?type=0','1')">
					<view>
						<image class="userfulimg" src="../../static/user/group.png" ></image>
					</view>
					<view>拼团订单</view>
				</view> -->
				<view class="userful_item" @click="navTo('/pages/user/yun/tuijian?ma='+binfo.recommendCode,'1')">
					<view>
						<image class="userfulimg" src="../../static/user/fenxiang.png" ></image>
					</view>
					<view>分享好友</view>
				</view>
				<view class="userful_item" @click="navTo('/pages/user/learn','1')">
					<view>
						<image class="userfulimg" src="../../static/user/xuexi.png" ></image>
					</view>
					<view>学习</view>
				</view>
				<view class="userful_item" @click="navTo('/pages/transfer/transfer','1')">
					<view>
						<image class="userfulimg" src="../../static/user/huazhuan.png"></image>
					</view>
					<view>转账</view>
				</view>
				<view class="userful_item" @click="navTo('/pages/user/group','1')">
					<view>
						<image class="userfulimg" src="../../static/user/tuandui.png" ></image>
					</view>
					<view>团队</view>
				</view>
				<view class="userful_item" @click="navTo('/pages/product/productlist?type=1','1')">
					<view>
						<image class="userfulimg" src="../../static/user/shengji.png"></image>
					</view>
					<view>升级</view>
				</view>
				<!-- <view class="userful_item" @click="navTo('/pages/user/bill','1')">
					<view>
						<image class="userfulimg" src="../../static/user/zhangdan.png" ></image>
					</view>
					<view>账单</view>
				</view> -->
				<view class="userful_item" @click="navTo('/pages/user/notice','1')">
					<view>
						<image class="userfulimg" src="../../static/user/gonggao.png" ></image>
					</view>
					<view>公告</view>
				</view>
				<!-- <view class="userful_item" @click="navTo('/pages/user/about','0')">
					<view>
						<image class="userfulimg" src="../../static/user/guanyu.png" ></image>
					</view>
					<view>关于商盟</view>
				</view> -->
				<view class="userful_item" @click="navTo('/pages/user/message/message','1')">
					<view>
						<image class="userfulimg" src="../../static/user/liuyan.png" ></image>
					</view>
					<view>留言</view>
				</view>
				<view class="userful_item" @click="navTo('/pages/address/addresslist','1')">
					<view>
						<image class="userfulimg" src="../../static/user/address.png" ></image>
					</view>
					<view>地址管理</view>
				</view>
				<view class="userful_item" @click="outLogin" >
					<view>
						<image class="userfulimg" src="../../static/user/tuichu.png" ></image>
					</view>
					<view>退出</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mybi} from"../../api/login.js"
	export default {
		data() {
			return {
				islogin:false,
				userInfo:"",
				binfo:{},//余额积分信息
			}
		},
		onShow(){
			if(uni.getStorageSync("userInfo")){
				this.islogin=true
				this.userInfo=uni.getStorageSync("userInfo")
				this.getbi()
			}
		},
		methods: {
			outLogin(){
				if(this.Md.islogin()){
					this.showMd("退出登录",()=>{
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('yunbi');
						this.islogin=false
						// #ifdef APP-PLUS
						// plus.runtime.quit()
						// #endif
					})
				}
			},
			// 扫码
			scan(){
				uni.scanCode({
					onlyFromCamera: true,
				    success:(res)=>{
				        console.log('条码内容：' + res.result);
						// #ifndef H5
						let url=res.result.split("#")[1]
						uni.navigateTo({
							url:url
						})
						// #endif
				    }
				});
			},
			// 获取积分余额信息
			async getbi(){
				let res=await this.get(mybi)
				this.binfo=res.data
				uni.setStorageSync("yunbi",res.data)
				console.log(res)
			},
			// 去登录
			tologin(url){
				uni.navigateTo({
					url:url
				})
			},
			// 统一跳转
			navTo(url,type){
				// type=0不要登录 1 需要登录
				if(type==0){
					uni.navigateTo({
						url:url
					})
				}else{
					if(this.Md.islogin()){
						uni.navigateTo({
							url:url
						})
					}
				}
			}
		},
	}
</script>

<style>
	.bottom{
		padding-top: 160rpx !important;
	}
	.scan{
		position: absolute;
		right: 40rpx;
		top: 100rpx;
		
	}
	page {
		background: #EDEDED;
	}
	.nav{
		width: 750rpx;
		height:var(--status-bar-height);
		background-color: #f3c44e;
	}
	.head {
		width: 750rpx;
		height: 340rpx;
		background-color: #f3c44e;
		position: relative;
		/* position: fixed; */
		/* top: 0; */
		/* left: 0; */
	}

	.info {
		width: 690rpx;
		height: 167rpx;
		padding-top: 87rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.touxiang {
		width: 120rpx;
		height: 120rpx;
		border-radius:60rpx;
	}

	.name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 24rpx;
	}

	.level {
		width: 690rpx;
		display: flex;
		align-items: center;
		margin-top: 40rpx;
	}

	.level_bg {
		width: 176rpx;
		height: 53rpx;
		margin-left: 30rpx;
		background:#EA1E08;
		border-radius: 27rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.vimg {
		width: 35rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.blue {
		width: 690rpx;
		height: 210rpx;
		background: #fff;
		border-radius: 12rpx;
		position: relative;
		top: -30rpx;
		margin: 0 auto ;
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.yun {
		width: 230rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}

	.yunimg {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 20rpx;
	}

	.order {
		width: 690rpx;
		height: 200rpx;
		padding-top: 20rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
	}

	.all_order {
		width: 650rpx;
		height: 40rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order_detail {
		width: 690rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.order_item {
		position: relative;
		width: 138rpx;
		text-align: center;
	}
	.iten_num{
		position: absolute;
		background-color: #EA1E08;
		border-radius:20rpx;
		top: -15rpx;
		font-size: 20rpx;
		line-height: 20rpx;
		padding: 4rpx 6rpx;
		left: 80rpx;
		line-height: 20rpx;
		color: #FFFFFF;
		z-index: 2;
		
	}
	.orderimg {
		width: 41rpx;
	}

	.order_item_text {
		margin-top: 20rpx;
	}
	.more{
		width: 690rpx;
		/* height: 517rpx; */
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 30rpx auto 138rpx;
		padding-top: 25rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}
	.userful{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
		margin-left: 20rpx;
	}
	.userful_box{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
	}
	.userful_item{
		width: 25%;
		text-align: center;
		margin-bottom: 40rpx;
	}
	.userfulimg{
		width: 42rpx;
		height: 42rpx;
	}
</style>
